<!--财务设置->期末凭证-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="business-big-box" style="margin:2px 8px;">
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="templateEdit(1)">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="getDataList">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div class="model-card">
                <div class="card-list" v-for="(item,index) in dataSource" :key="index">
                    <div class="card-center">
                        <div class="title">
                            <div class="title-item">{{item.code}}-{{item.name}}</div>
                            <div class="title-item" @click="templateEdit(item)">
                                <a-icon type="form" />
                            </div>
                            <div class="title-item" @click="templateDelete(item)">
                                <a-icon type="delete" />
                            </div>
                        </div>
                        <div style="padding:10px;height: 110px;overflow: auto;">
                            <div style="font-size:14px">借：</div>
                            <div style="margin-left:20px;" v-if="m.amountDirection == 1" v-for="m in item.orderDetailList"> {{m.accountingName}}</div>
                            <div style="font-size:14px;margin-left:18px">贷：</div>
                            <div style="margin-left:38px;" v-if="m.amountDirection == 2" v-for="m in item.orderDetailList"> {{m.accountingName}}</div>
                        </div>
                        <div class="card-btn" @click="generateCredentials(item.id)">
                            生成凭证
                        </div>
                    </div>
                </div>
                <div class="card-list">
                    <div class="card-center" style="cursor:pointer;text-align:center;" @click="templateEdit(1)">
                        <a-icon class="card-add" type="plus" />
                    </div>
                </div>
            </div>
        </div>

        <!-- modal 弹窗  -->
        <add-credentials ref="add" :nowId="nowId" @showEditFormula="showEditFormula" @getDataList="getDataList"></add-credentials>

        <edit-formula ref="formula" @formulaBack="formulaBack"></edit-formula>
    </div>
</template>
<script>

import { mapState } from "vuex";
import { pageList, getDefault } from "@/api/erp/category";
import { save, getList, detail, remove } from "@/api/finance/endCredentials";
import editFormula from "@/components/Finance/credentials/editFormula/editFormula";
import addCredentials from "@/components/Finance/credentials/add/add";

export default {
    components: {
        editFormula,
        addCredentials
    },
    data () {
        return {
            dataSource: [],//列表数据


            visible: false,
            top: 0,
            left: 0,

            radioGroup: null,
            selectedRowKeys: [],
            isRouterAlive: true,
            dataSourceNumber: 12,//默认行数
            thisClickId: null,
            thisClickIndex: null,

        }
    },
    activated () {
        this.getDataList();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        //获取凭证列表
        getDataList () {
            let requestData = {
                vType: 2
            }
            getList(requestData).then(response => {
                if (response.code === 200) {
                    let data = response.data.records;
                    if (data.length < 1) {
                        this.dataSource = [];
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            delete data[i].createDate;
                            data[i].key = data[i].id;
                        }
                        this.dataSource = data;
                    }
                }
            }).catch(error => { });
        },
        templateEdit (data) {
            this.$refs.add.templateEdit(data,2);
        },
        templateDelete (item) {
            //删除
            let that = this;
            this.$confirm(
                {
                    title: '提示',
                    content: <span>是否确认删除<span style="color:red">{item.name}</span>模板?</span>,
                    okText: '确定',
                    cancelText: '取消',
                    onOk () {
                        remove({ id: item.id }).then(res => {
                            if (res.code === 200) {
                                that.$message.success('删除成功');
                                that.getDataList();
                                that.nowId = null;
                            }
                        })
                    },
                    onCancel () {

                    },
                }
            )
        },
        showEditFormula (data) {
            this.$refs.formula.show(data.record, data.index);
        },
        formulaBack (backdata) {
            console.log(backdata);
            this.$refs.add.formulaBack(backdata);
        },
        generateCredentials (id) {
            //生成凭证
            localStorage.setItem("credentialsTemplate", JSON.stringify({ "id": id, "vtype": 2 }));
            setTimeout(() => {
                localStorage.removeItem("credentialsTemplate");//删除名称为“key”的信息。
            }, 1000);
            this.$router.push('/finance/accounting/credentials');
        },
    }
};
</script>
<style lang="less">
    @import '~@/style/setting/business.less';
    .model-card {
        height: calc(100% - 55px);
        min-width: 1000px;
        border-bottom: none;
        overflow-y: auto;
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        .card-list {
            flex: 0 0 25%;
            height: 230px;
            font-size: 12px;
            padding: 10px;
            box-sizing: border-box;
            .card-center {
                position: relative;
                border: 1px solid rgba(30, 159, 255, 0.8);
                width: 100%;
                height: 100%;
                font-size: 14px;
                .title {
                    display: flex;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background: rgba(30, 159, 255, 0.8);
                    color: #ffffff;
                    .title-item:nth-child(1) {
                        flex: 0 0 70%;
                        text-align: left;
                        padding-left: 10px;
                        box-sizing: border-box;
                    }
                    .title-item:nth-child(2) {
                        flex: 0 0 15%;
                        cursor: pointer;
                    }
                    .title-item:nth-child(3) {
                        flex: 0 0 15%;
                        cursor: pointer;
                    }
                }
                .card-add {
                    margin-top: 68px;
                    font-size: 72px;
                    color: rgba(30, 159, 255, 0.8);
                }
                .card-btn {
                    position: absolute;
                    bottom: 10px;
                    width: 100px;
                    background: rgba(30, 159, 255, 0.8);
                    left: 50%;
                    margin-left: -50px;
                    text-align: center;
                    color: #ffffff;
                    cursor: pointer;
                    padding: 5px 0;
                }
            }
        }
        .card-list:hover {
            .card-center {
                border: 1px solid rgba(30, 159, 255, 1);
            }
            .title {
                background: rgba(30, 159, 255, 1);
            }
            .card-btn {
                background: rgba(30, 159, 255, 1);
            }
            .card-add {
                color: rgba(30, 159, 255, 1);
            }
        }
    }
</style>
 